<template>
	<div class="contact">
		<div class="banner"></div>
		<div class="tab-box">
			<div class="tab-wrap">
				<div class="tab-menu">
					<div class="tab-item active">联系我们</div>
				</div>
			</div>
		</div>
		<div class="tab-content">
			<div class="content-wrap">
				<div class="introduce">
					<div class="intro">
						我们的网站旨在为学生，教职工提供一个在线交流和互动的平台。能够促进信息共享与交流、促进学习与发展、支持
						职业规划、丰富课外生活、记录美好校园生活瞬间。一个活跃且管理良好的校园论坛系统不仅是信息交流和技术支持
						的平台，也是构建和谐校园关系、推动个人成长和社会发展的有力工具。
					</div>
					<div class="user-info">
						<div class="info-item"><b>联系人</b>：校园论坛系统</div>
						<div class="info-item"><b>联系电话</b>：16799975568</div>
						<div class="info-item"><b>联系微信</b>：wy02100821</div>
					</div>
				</div>
				<div class="personal-info">
					<fieldset>
						<legend>联系我们</legend>
						<el-form ref="form" :model="userForm" label-width="80px">
							<el-row>
								<el-col :span="12">
									<el-form-item label="姓名">
										<el-input v-model="userForm.name" placeholder="请输入姓名"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="邮箱">
										<el-input v-model="userForm.email" placeholder="请输入邮箱"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-form-item label="地址">
								<el-input v-model="userForm.address" placeholder="请输入地址"></el-input>
							</el-form-item>
							<el-form-item label="留言">
								<el-input v-model="userForm.content" placeholder="请输入留言" type="textarea"
								:rows="10"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="danger" @click="handleSaveUserInfo()">提交</el-button>
							</el-form-item>
						</el-form>
					</fieldset>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Contact',
	data() { 
		return {
			//个人信息
			userForm: {
				name: '',
				address: '',
				email: '',
				content: ''
			}
		}
	},
	mounted() { 
		
	},
	methods: {
		/**
		 * 保存用户信息
		 */
		handleSaveUserInfo() { 

		}
	}
}
</script>

<style lang="scss" scoped>
.contact {
	width: 100%;
	min-height: 760px;
	.banner {
		width: 100%;
		height: 140px;
		background-image: url('~@/assets/images/list-banner.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: 0 -100px;
		margin: 0 auto;
	}
	.tab-box {
		width: 100%;
		height: 60px;
		background-color: #fff;
		border-bottom: 1px solid #e0e0e0;
		.tab-wrap {
			display: flex;
			width: 1280px;
			height: 100%;
			margin: 0 auto;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
		.tab-menu {
			display: flex;
			height: 100%;
			flex-direction: row;
			align-items: center;
			.tab-item {
				display: flex;
				font-size: 18px;
				font-weight: bold;
				width: 150px;
				text-align: center;
				transition: all .2s;
				cursor: pointer;
				letter-spacing: 2px;
				&.active {
					color: #000;
					font-size: 20px;
				}
			}
		}
	}
	.tab-content {
		width: 100%;
		background: rgba(255,255,255, .9);
		.content-wrap {
			display: flex;
			width: 1280px;
			margin: 0 auto;
			padding: 30px 0 50px 0;
			flex-direction: row;
		}
		.introduce {
			width: 50%;
			.user-info {
				width: 100%;
				display: flex;
				flex-direction: column;
				.info-item {
					margin-top: 15px;
					text-indent: 24px;
				}
			}
			.intro {
				padding-right: 15px;
				text-indent: 24px;
				line-height: 36px;
			}
		}
		.personal-info {
			width: 50%;
			fieldset {
				border-color: #80A681;
				border-width: 1px;
				padding-top: 20px;
			}
			legend {
				color: #80A681;
			}
		}
		.password-info {
			margin-top: 20px;
			fieldset {
				border-color: #80A681;
				border-width: 1px;
				padding-top: 20px;
			}
			legend {
				color: #80A681;
			}
		}
	}
}
::v-deep .personal-info .el-input__inner {
	border-radius: 0;
}
::v-deep .password-info .el-input__inner {
	border-radius: 0;
}
::v-deep .el-button--danger {
	background-color: #80A681 !important;
	border-color: #80A681 !important;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
	background-color: #80A681 !important;
	border-color: #80A681 !important;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
	color: #80A681 !important;
}
</style>